<template>
<div class="layout">
    <Layout :style="{height:'100vh'}">
        <Sider breakpoint="md" :collapsed-width="78" v-model="isCollapsed" :style="{zIndex:'900'}">
            <div class="logo-img">
                <a href="/#/index/index"><img src="/statics/console/img/logo.png" alt=""></a>
            </div>
            <Menu active-name="1-2" width="auto" :class="menuitemClasses" accordion>
                <!-- 一级分类 -->
                <div :name="one.name" theme="light" v-for="one in menuData" :key="one.id">
                    <div class="left_one">
                        <Icon type="ios-more" />
                        {{ one.name }}
                    </div>
                    <!-- 二级分类 -->
                    <Submenu :name="two.name" theme="light" v-for="two in one.submenu" :key="two.id">
                        <template slot="title">
                        <Icon :type="two.icon" />
                            {{ two.name }}
                        </template>
                        <!-- 三级分类 -->
                        <MenuItem :name="there.name" v-for="there in two.there" :key="there.id" :to="'/' + there.url">{{ there.name }}
                            <Icon type="ios-arrow-round-forward" :style="{float: 'left'}" />
                        </MenuItem>
                    </Submenu>
                </div>
            </Menu>
            <!-- 退出 -->
            <div class="left_two" @click="handleDropDownClick('logout')">
              <Icon type="ios-arrow-dropright" style="margin-right:10px" />退出登录
            </div>
        </Sider>
        <Layout>
            <!-- <Header class="layout-header-bar">
                <Breadcrumb class="f-l bread">
                    <BreadcrumbItem v-for="item in breadCrumbList" :to="item.to" :key="item.id">{{ item.name }}</BreadcrumbItem>
                </Breadcrumb>
            </Header> -->
            <!-- 标题 + 按钮组 -->
            <div class="right_top_bg clearfix">
                <!-- <div class="right_top clearfix">
                    <h4 class="f-l right-titles">{{ title }}</h4>
                </div> -->
            </div>
            <Content :style="{ padding:'15px', background: '#fff'}">
                <router-view></router-view>
            </Content>
            <Footer class="layout-footer-center">2018-2021 &copy; 山木枝</Footer>
        </Layout>
    </Layout>
</div>
</template>
<script>
import supplier_router from '../.././router/supplier'
import { LOGOUT } from '../.././store/mutation_types'
export default {
  data() {
    return {
      isCollapsed: false, // 侧栏开关
      menuData: [], // 左侧菜单
      breadCrumbList: [], // 面包屑
      title: '首页', // 标题
    };
  },
  computed: {
    // 登录状态
    username() {
      return this.$store.getters.supplier_id != 0 ? this.$store.getters.supplier_name : '未登陆'
    },
    menuitemClasses: function() {
      return [
        'menu-item',
        this.isCollapsed ? 'collapsed-menu' : ''
      ]
    }
  },
  created: function() {
    this.getMenuData();
  },
  methods: {
    handleDropDownClick: function(name) {
      if (name == 'logout') {
        this.$store.commit(LOGOUT)
        // 跳转到登录
        supplier_router.push('/');
      }
    },
    getMenuData: function() {
      var self = this
      this.$api.menu.left().then(res => {
        self.menuData = res.result
      });
    }
  }
}
</script>
